<template>
  <Form
    :label-width="120"
    ref="formValidate"
    :rules="ruleValidate"
    :model="formValidate"
    label-position="left"
    :disabled="type === 3"
  >
    <FormItem prop="menuCode" label="菜单编号">
      <i-input
        type="text"
        v-model="formValidate.menuCode"
        placeholder="注意格式"
      >
      </i-input>
    </FormItem>
    <FormItem prop="menuName" label="菜单名称">
      <i-input
        type="text"
        v-model="formValidate.menuName"
        placeholder="菜单名称"
      >
      </i-input>
    </FormItem>
    <FormItem label="上级菜单">
      <Cascader
        change-on-select
        @on-change="clearParentMenu"
        placeholder="请选择上级菜单"
        :data="topMenuList"
        v-model="formValidate.menuIds"
      ></Cascader>
    </FormItem>
    <FormItem label="排序" prop="sortCode">
      <i-input
        type="text"
        v-model="formValidate.sortCode"
        placeholder="排序值只能为数字"
      >
      </i-input>
    </FormItem>

    <FormItem label="菜单图标">
      <i-input
        type="text"
        v-model="formValidate.icon"
        placeholder="可以为图片或icon，图片项目必须存在"
      >
      </i-input>
    </FormItem>
    <FormItem label="权限值">
      <i-input
        type="text"
        v-model="formValidate.permissions"
        placeholder="比如：列表,新增,修改,删除"
      >
      </i-input>
    </FormItem>
    <FormItem label="权限dom">
      <i-input
        type="text"
        v-model="formValidate.doms"
        placeholder="与权限值对应"
      >
      </i-input>
    </FormItem>
    <FormItem label="菜单地址">
      <i-input
        type="text"
        v-model="formValidate.linkUrl"
        placeholder="可以为完整的url地址"
      >
      </i-input>
    </FormItem>
    <FormItem label="页面路径">
      <i-input
        type="text"
        v-model="formValidate.pagePath"
        placeholder="前端页面路径，已@/views/开始"
      >
      </i-input>
    </FormItem>
    <FormItem label="是否显示">
      <Select v-model="formValidate.isShow">
        <Option :value="1" key="1">是</Option>
        <Option :value="0" key="0">否</Option>
      </Select>
    </FormItem>
    <FormItem label="菜单标识符">
      <i-input
        type="text"
        v-model="formValidate.menuKey"
        placeholder="菜单标识符"
      >
      </i-input>
    </FormItem>
    <FormItem label="站点">
      <i-input
        type="text"
        v-model="formValidate.siteCode"
        placeholder="站点"
      >
      </i-input>
    </FormItem>
    <FormItem label="备注">
      <i-input
        type="textarea"
        v-model="formValidate.memo"
        placeholder="备注"
      >
      </i-input>
    </FormItem>
    <FormItem v-if="type !== 3">
      <Button
        type="primary"
        @click="publicSubmitWithEmptyString('formValidate',ignore)"
      >确定
      </Button>
      <Button @click="publicReset('formValidate')" style="margin-left: 8px">取消</Button>
    </FormItem>
  </Form>
</template>

<script>
import { updateMixin } from '../../../mixin'
import { isLetterOrNum } from '../../../utils/verification'
import API_KEY from '../../../api'
import { getMenuInfoById } from '../../../api/modules/system/menu'

export default {
  name: 'MenuManageUpdate',
  mixins: [updateMixin],
  props: {
    topMenuList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    // 自定义校验规则
    const checkSortCode = (rule, value, callback) => {
      const flag = isLetterOrNum(value)
      if (!flag && value !== '') {
        callback(new Error('只能为字母或数字或二者组合'))
      } else {
        callback()
      }
    }
    return {
      // 表单数据
      ignore: ['fkParentId'],
      formValidate: {
        menuIds: [],
        icon: '',
        doms: '',
        sortCode: '',
        menuCode: '',
        menuName: '',
        permissions: '',
        linkUrl: '',
        pagePath: '',
        isShow: 1,
        menuKey: '',
        siteCode: '',
        memo: ''
      },
      // 表单校验规则
      ruleValidate: {
        menuCode: [{ required: true, message: '当前项不能为空', trigger: 'blur' }],
        menuName: [{ required: true, message: '当前项不能为空', trigger: 'blur' }],
        sortCode: [{ validator: checkSortCode, trigger: 'blur' }]
      },
      // 请求地址
      action: {
        // 新增数据
        createData: API_KEY.menu.crudMenu,
        // 更新数据
        updateData: API_KEY.menu.crudMenu
      },
      // 注意！注意！注意！当前属性不要随便定义。再次提示如果提交数据前不需要对数据进行处理千万不要定义，
      // 定义后必须配合下方的beforeSubmit方法使用
      isHandleSubmit: true,
      // 是否需要初始化
      isInit: false
    }
  },
  mounted () {
    if (this.type !== 1 && this.type !== -1) {
      this.getMenu()
    }
  },
  methods: {
    /**
       * 根据id获取数据
       */
    getMenu () {
      getMenuInfoById(this.moduleId).then(({ data }) => {
        // 新增version和id
        this.formValidate.id = this.moduleId
        this.formValidate.version = null
        Object.keys(this.formValidate).forEach(item => {
          if (item !== 'menuIds') {
            this.formValidate[item] = data[item]
          } else if (item === 'menuIds') {
            const arr = data[item].slice(0)
            arr.pop()
            this.formValidate[item] = arr
          }
        })
      })
    },
    clearParentMenu (value) {
      if (undefined === value || (value && value.length === 0) || !value) {
        this.formValidate.menuIds = []
      } else {
        this.formValidate.menuIds = value
      }
    },
    /**
       * 数据提交前执行函数，必须返回一个Promise对象，必须配合isHandleSubmit属性使用
       */
    beforeSubmit () {
      return new Promise(resolve => {
        // 拷贝this.formValidate对象(this.formValidate的数据都进行了数据双向绑定，建议不要直接操作)
        const params = {}
        Object.keys(this.formValidate).forEach(item => {
          params[item] = this.formValidate[item]
        })
        // es6结构赋值
        const { menuIds } = params
        if (menuIds.length !== 0) {
          // 为params添加上级菜单字段id属性(值为menuIds最后1位)
          params.fkParentId = menuIds[menuIds.length - 1]
        } else {
          // 没有上级菜单，删除fkParentId属性
          params.fkParentId = ''
        }
        // 删除params中menuIds字段
        delete params.menuIds
        resolve(params)
      })
    }
  }
}
</script>

<style scoped>

</style>
